<template>
  <div class="list">
    <el-row v-if="showTitle">
      <el-col :span="6" :offset="1">
        <h3>{{title}}</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="1" v-for="book in bookList" :key="book.bookId">
        <router-link :to="'detail?bookId='+book.bookId" style="display: block;text-decoration: none">
          <el-card style="margin: 5px" :body-style="{padding:'0px'}">
            <el-image style="width: 100%;height: 240px;" fit="fill" :src="baseImageUrl+book.cover"/>
            <div style="padding: 15px;">
              <div style="margin-bottom: 15px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">{{book.bookName}}</div>
              <div style="margin-bottom: 15px" v-if="showType">
                <el-tag v-for="category in book.categoryList" :key="category.categoryId" size="medium" style="margin: 0 5px 3px 0" v-text="category.categoryName"></el-tag>
              </div>
              <div v-if="showStatus" style="margin-bottom: 15px;display: flex;justify-content: space-between;">
                <div>
                  <el-tag v-if="book.bookStatus === 1" type="warning">连载中</el-tag>
                  <el-tag v-else type="success">已完结</el-tag>
                </div>
                <div v-if="showRemove">
                  <el-button type="danger" @click.prevent="$emit('onRemove',book.bookId)" size="small">移除</el-button>
                </div>
              </div>
              <div style="margin-bottom: 15px">作者：{{book.authorName}}</div>
            </div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BookList',
  data () {
    return {
      baseImageUrl: process.env.VUE_APP_BASE_URL + '/img/'
    }
  },
  props: {
    title: {
      type: String,
      default: '图书列表'
    },
    bookList: {
      type: Array
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    showStatus: {
      type: Boolean,
      default: false
    },
    showType: {
      type: Boolean,
      default: false
    },
    showRemove: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>

</style>
